<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <div style="display: flex; flex-direction: column; gap: 10px;width: 100%;">
        <div>
          <t-date-time
            dateType="datetime"
            label="日期时间"
            labelPosition="left"
            placeholder="placeholder"
            v-model="date1"
            displayFormatWithDateTime="YYYY/MM/DD HH:mm"
            ref="dateTime"
          />
        </div>
        <div>
          <t-date-time
            labelPosition="left"
            label="日期"
            dateType="date"
            v-model="date2"
            displayFormatWithDate="YYYY/MM/DD"
          />
        </div>
        <div>
          <t-date-time
            label="时间"
            dateType="time"
            v-model="date3"
            labelPosition="left"
          />
        </div>
        <div>
          <t-date-time
            label="时间选择"
            dateType="timeselect"
            labelPosition="left"
            v-model="date4"
            start="00:00"
            step="00:30"
            end="23:30"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  setup() {
    let dateTime = ref();
    let date1 = ref('2024-04-01 13:27:00');
    let date2 = ref('2024-04-01');
    let date3 = ref('13:27:00');
    let date4 = ref('15:00')
    return {
      dateTime,
      date1,
      date2,
      date3,
      date4
    };
  },
};
</script>
